<template>
	<view class="common-modal modal">
		<view class="box">
			<view class="title">提示</view>
			<view v-if="msg" class="message" style="text-align: center;">{{ msg }}</view>
			<view v-else class="message">
				<view style="text-align: center">正在申请当前房屋认证流程</view>
				<view style="text-align: center">请点击确定进行下一步操作</view>
			</view>
			<view class="btn-cont">
				<button hover-class="none" class="btn-cancel" @click="cancel">取消</button>
				<button v-if="msg" hover-class="none" class="btn-share" @click="confirm">确定</button>
				<button v-else hover-class="none" class="btn-share" open-type="share" id="shareBtn" @click="confirm">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		msg: { type: String, default: '' }
	},
	data() {
		return {};
	},
	methods: {
		confirm() {
			this.$emit('on-confirm');
		},
		cancel() {
			this.$emit('on-cancel');
		}
	}
};
</script>

<style lang="scss">
@function rpx($size) {
	@return $size * 1rpx;
}

.common-modal {
	width: 100%;
	height: 100%;
	z-index: 999;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.5);
	.box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: rpx(580);
		margin: 0 auto;
		border-radius: rpx(20);
		overflow: hidden;
		background-color: #fff;
		text-align: center;
		padding-top: rpx(60);
		/*padding-bottom: rpx(20);*/
		.title {
			font-size: rpx(30);
			color: #333;
			margin-bottom: rpx(60);
		}
		.message {
			color: #999;
			text-align: left;
			font-size: rpx(30);
			margin-bottom: rpx(72);
			padding: 0 rpx(60);
			letter-spacing: 1rpx;
			line-height: 1.8;
			white-space: nowrap;
		}
		.btn-cont {
			position: relative;
			width: 100%;
			height: rpx(100);
			line-height: rpx(100);
			display: flex;
			font-size: rpx(30);
			justify-content: space-between;
			border-top: 1px solid #efefef;
			.btn-share {
				position: relative;
				text-align: center;
				color: #ff9900;
				flex: 1;
				background-color: #fff;
				line-height: rpx(100);
				font-size: 30rpx;
				&::after {
					border: none;
				}
			}
			.btn-cancel {
				position: relative;
				text-align: center;
				flex: 1;
				background-color: #fff;
				line-height: rpx(100);
				font-size: 30rpx;
				&::after {
					content: '';
					position: absolute;
					right: 0;
					left: unset;
					top: 26rpx;
					bottom: 30rpx;
					width: 2rpx;
					height: 100rpx;
					background-color: #ccc;
				}
			}
		}
	}
}
</style>
